<!DOCTYPE html><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<meta http-equiv="X-UA-Compatible" content="IE=Edge" ><title>vPanel - Forms</title><link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular,bold" media="screen" rel="stylesheet" type="text/css" >
<link href="http://fonts.googleapis.com/css?family=PT+Serif+Caption" media="screen" rel="stylesheet" type="text/css" >
<link href="css/reset.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/grid.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/elfinder.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/jquery.ui.datatables.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/jquery.slidernav.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/jquery.fullcalendar.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/ui/default-ui/ui.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/ui/default-ui/portlet.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/ui/default-ui/jquery.ui.uniform.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/ui/default-ui/colors/jquery.ui.colors.default.css" media="screen" rel="stylesheet" type="text/css" class="uicolor" >
<link href="css/forms.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/prettify.css" media="screen" rel="stylesheet" type="text/css" >
<!--[if lt IE 8]> <link href="css/ie.css" media="screen" rel="stylesheet" type="text/css" ><![endif]--><!--[if lt IE 9]> <script type="text/javascript" src="js/html5.js"></script><![endif]-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.selectors.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/overlay.apple.js"></script>
<script type="text/javascript" src="js/jquery.ui.min.js"></script>
<script type="text/javascript" src="js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/jquery.slidernav.js"></script>
<script type="text/javascript" src="js/jquery.fullcalendar.min.js"></script>
<script type="text/javascript" src="js/jquery.isotope.min.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/supersubs.js"></script>
<script type="text/javascript" src="js/elfinder.full.js"></script>
<script type="text/javascript" src="js/prettify/prettify.js"></script>
<script type="text/javascript" src="js/global.js"></script>
<!--[if lt IE 9]> <script type="text/javascript" src="js/selectivizr.js"></script><![endif]-->
<!--[if lt IE 8]> <script type="text/javascript" src="js/ie.js"></script><![endif]-->
<script>
	$(function() {
		var availableTags = [
			"ActionScript",
			"AppleScript",
			"Asp",
			"BASIC",
			"C",
			"C++",
			"Clojure",
			"COBOL",
			"ColdFusion",
			"Erlang",
			"Fortran",
			"Groovy",
			"Haskell",
			"Java",
			"JavaScript",
			"Lisp",
			"Perl",
			"PHP",
			"Python",
			"Ruby",
			"Scala",
			"Scheme"
		];
		$( "#quick-search" ).autocomplete({
			source: availableTags
		});
	});
</script>

<!-- LOADING SCRIPT -->
<script>
$(window).load(function(){
    $("#loading").fadeOut(function(){
        $(this).remove();
        $('body').removeAttr('style');
    });
});
</script>

<style type = "text/css">
    #container {position: absolute; top:50%; left:50%;}
    #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
    #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
    #loadinggraphic {margin-right: 0.2em; margin-bottom:-2px;}
    #loading {background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0; z-index: 9999;}
</style> 
<!-- LOADING SCRIPT END -->

</head>
<body>

    <div id="loading"> 
        <script type = "text/javascript"> 
            document.write("<div id='container'><p id='content'>" +
                           "<img id='loadinggraphic' width='16' height='16' src='images/ajax-loader-eeeeee.gif' /> " +
                           "Loading...</p></div>");
        </script> 
    </div> 
    
    <div id="wrapper" class="clearfix">
        <header class="container_8 clearfix">
            <div class="grid_8">
                <h1>vPanel</h1>
                <form class="fr">
                    <input id="quick-search" type="text" placeholder="Search..." />
                </form>
                <nav>
                    <ul class="sf-menu clearfix">
                        <li class="active"><a href="dashboard.htm">Dashboard</a>
                            <ul>
                                <li><a href="activity.htm">Activity</a></li>
                                <li><a href="files.htm">Files</a></li>
                                <li><a href="calendar.htm">Calendar</a></li>
                                <li><a href="contacts.htm">Contacts</a></li>
                            </ul>
                        </li>
                        <li ><a href="#">Features</a>
                            <ul>
                                <li><a href="wysiwyg.htm">WYSIWYG</a></li>
                                <li><a href="forms.htm">Forms</a></li>
                                <li><a href="widgets.htm">Widgets</a></li>
                                <li><a href="tables.htm">Tables</a></li>
                                <li><a href="styles.htm">Styles</a></li>
                                <li><a href="navicons.htm">Nav Icons</a></li>
                                <li><a href="grid.htm">Grid System</a></li>
                            </ul>
                        </li>
                        <li ><a href="themes.htm">Themes</a></li>
                        <li><a href="#">Sample Menu</a>
                            <ul>
                                <li><a href="#">menuitem 1</a></li>
                                <li><a href="#">menuitem 2</a></li>
                                <li><a href="#">menuitem 3</a></li>
                                <li><a href="#">menuitem 4</a></li>
                                <li><a href="#">Sample Submenu</a>
                                    <ul>
                                        <li><a href="#">submenu 1</a></li>
                                        <li><a href="#">submenu 2</a></li>
                                        <li><a href="#">submenu 3</a></li>
                                        <li><a href="#">submenu 4</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="fr"><a href="#" class="arrow-down">hfh</a>
                            <ul>
                                <li><a href="account.htm">Account</a></li>
                                <li><a href="account.htm">Users</a></li>
                                <li><a href="account.htm">Groups</a></li>
                                <li><a href="account.htm">Help</a></li>
                                <li><a href="logout.htm">Sign out</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>
        
        <section>
            <div class="container_8 clearfix">                

                <!-- Main Section -->

                <section class="main-section grid_8">
                    <nav>
                        <a class="chevron" href="#">&raquo;</a>
                        <ul>
                            <li><a href="wysiwyg.htm" class="navicon-folder-open">WYSIWYG</a></li>
                            <li class="current"><a href="forms.htm" class="navicon-id-card">Forms</a></li>
                            <li><a href="widgets.htm" class="navicon-window">Widgets</a></li>
                            <li><a href="tables.htm" class="navicon-table">Tables</a></li>
                            <li><a href="styles.htm" class="navicon-palette">Styles</a></li>
                            <li><a href="navicons.htm" class="navicon-photos">Nav Icons</a></li>
                            <li><a href="grid.htm" class="navicon-grid">Grid System</a></li>
                        </ul>
                    </nav>

                    <div class="main-content">
                        <header>
                            <h2>Forms</h2>
                        </header>
                        
                        <section class="container_6 clearfix">
                            <!-- Forms Section -->
                            <div class="grid_3">
                                <div class="portlet">
                                    <header>
                                        <h2>Form Example 1</h2>
                                    </header>
                                    <section>
                                        <form class="form has-validation">
                                            <div class="clearfix">
                                                <label for="form-name" class="form-label">Name <em>*</em><small>Enter your name</small></label>
                                                <div class="form-input"><input type="text" id="form-name" name="name" required="required" /></div>
                                            </div>
                                            <div class="clearfix">
                                                <label for="form-email" class="form-label">Email <em>*</em><small>A valid email address</small></label>
                                                <div class="form-input"><input type="email" id="form-email" required="required" /></div>
                                            </div>
                                            <div class="clearfix">
                                                <label for="form-birthday" class="form-label">Birthdate<small>mm/dd/yyyy</small></label>
                                                <div class="form-input"><input type="date" id="form-birthday" name="date" /></div>
                                            </div>
                                            <div class="clearfix">
                                                <label for="form-username" class="form-label">Username <em>*</em><small>Alphanumeric (max 12 char.)</small></label>
                                                <div class="form-input"><input type="text" id="form-username" name="username" required="required" maxlength="12" /></div>
                                            </div>
                                            <div class="clearfix">
                                                <label for="form-password" class="form-label">Password<small>max. 30 char.</small></label>
                                                <div class="form-input"><input type="password" id="form-password" name="password" maxlength="30" /></div>
                                            </div>
                                            <div class="clearfix">
                                                <label for="form-password-check" class="form-label">Password check<small>Re-enter your password</small></label>
                                                <div class="form-input"><input type="password" id="form-password-check" name="check" data-equals="password" maxlength="30" /></div>
                                            </div>
                                            <div class="clearfix">
                                                <label for="form-website" class="form-label">Website <em>*</em><small>A valid URL</small></label>
                                                <div class="form-input"><input type="url" id="form-website" required="required" /></div>
                                            </div>
                                            <div class="clearfix">
                                                <label for="form-textarea" class="form-label">About you <em>*</em><small>Describe yourself</small></label>
                                                <div class="form-input form-textarea"><textarea id="form-textarea" required="required" rows="5" /></textarea></div>
                                            </div>
                                            <div class="clearfix">
                                                <label for="form-timezone" class="form-label">Timezone<small>Your timezone</small></label>
                                                <div class="form-input"><select id="form-timezone"><option>America/Los Angeles</option><option>America/New York</option><option>Asia/Manila</option></select></div>
                                            </div>
                                            <div class="clearfix">
                                                <label for="form-upload" class="form-label">Photo<small>80x80 jpeg/png format</small></label>
                                                <div class="form-input"><input type="file" id="form-upload" /></div>
                                            </div>
                                            <div class="clearfix">
                                                <label for="form-gender" class="form-label">Gender<small>Male or female?</small></label>
                                                <div class="form-input"><label><input type="radio" name="gender" id="form-gender" value="male" /> Male</label> <label><input type="radio" name="gender" value="female" /> Female</label></div>
                                            </div>
                                            <div class="clearfix">
                                                <label for="form-updates" class="form-label">Receive Updates?<small>Receive weekly updates</small></label>
                                                <div class="form-input"><input type="checkbox" id="form-updates" value="1" /></div>
                                            </div>
                                            <div class="form-action clearfix">
                                                <button class="button" type="submit" data-icon-primary="ui-icon-circle-check">OK</button>
                                                <button class="button" type="reset">Reset</button>
                                            </div>
                                        </form>
                                    </section>
                                </div>
                            </div>
                            <!-- End Forms Section -->

                            <!-- Forms Section -->
                            <div class="grid_3">
                                <div class="portlet">
                                    <header>
                                        <h2>Form Example 2</h2>
                                    </header>
                                    <section>
                                        <form class="form has-validation">
                                            <div class="clearfix">
                                                <label for="form2-name" class="form-label no-description">Name <em>*</em><small>Enter your name</small></label>
                                                <div class="form-input"><input type="text" id="form2-name" name="name" required="required" /></div>
                                            </div>
                                            <div class="clearfix">
                                                <label for="form2-email" class="form-label no-description">Email <em>*</em><small>A valid email address</small></label>
                                                <div class="form-input"><input type="email" id="form2-email" required="required" /></div>
                                            </div>
                                            <div class="clearfix">
                                                <label for="form2-birthday" class="form-label no-description">Birthdate<small>mm/dd/yyyy</small></label>
                                                <div class="form-input"><input type="date" id="form2-birthday" name="date" /></div>
                                            </div>
                                            <div class="clearfix">
                                                <label for="form2-username" class="form-label no-description">Username <em>*</em><small>Alphanumeric (max 12 char.)</small></label>
                                                <div class="form-input"><input type="text" id="form2-username" name="username" required="required" maxlength="12" /></div>
                                            </div>
                                            <div class="clearfix">
                                                <label for="form2-password" class="form-label no-description">Password<small>max. 30 char.</small></label>
                                                <div class="form-input"><input type="password" id="form2-password" name="password" maxlength="30" /></div>
                                            </div>
                                            <div class="clearfix">
                                                <label for="form2-password-check" class="form-label no-description">Password check<small>Re-enter your password</small></label>
                                                <div class="form-input"><input type="password" id="form2-password-check" name="check" data-equals="password" maxlength="30" /></div>
                                            </div>
                                            <div class="clearfix">
                                                <label for="form2-website" class="form-label no-description">Website <em>*</em><small>A valid URL</small></label>
                                                <div class="form-input"><input type="url" id="form2-website" required="required" /></div>
                                            </div>
                                            <div class="clearfix">
                                                <label for="form2-textarea" class="form-label">About you <em>*</em><small>Describe yourself</small></label>
                                                <div class="form-input form-textarea"><textarea id="form2-textarea" required="required" rows="5" /></textarea></div>
                                            </div>
                                            <div class="clearfix">
                                                <label for="form2-timezone" class="form-label no-description">Timezone<small>Your timezone</small></label>
                                                <div class="form-input"><select id="form2-timezone"><option>America/Los Angeles</option><option>America/New York</option><option>Asia/Manila</option></select></div>
                                            </div>
                                            <div class="clearfix">
                                                <label for="form2-upload" class="form-label no-description">Photo<small>80x80 jpeg/png format</small></label>
                                                <div class="form-input"><input type="file" id="form2-upload" /></div>
                                            </div>
                                            <div class="clearfix">
                                                <label for="form2-gender" class="form-label no-description">Gender<small>Male or female?</small></label>
                                                <div class="form-input"><label><input type="radio" name="gender" id="form2-gender" value="male" /> Male</label> <label><input type="radio" name="gender" value="female" /> Female</label></div>
                                            </div>
                                            <div class="clearfix">
                                                <label for="form2-updates" class="form-label no-description">Receive Updates?<small>Receive weekly updates</small></label>
                                                <div class="form-input"><input type="checkbox" id="form2-updates" value="1" /></div>
                                            </div>
                                            <div class="form-action clearfix">
                                                <button class="button" type="submit" data-icon-primary="ui-icon-circle-check">OK</button>
                                                <button class="button" type="reset">Reset</button>
                                            </div>
                                        </form>
                                    </section>
                                </div>
                            </div>
                            <!-- End Forms Section -->

                        </section>
                    </div>
                </section>
                <!-- Main Section End -->

            </div>
        </section>
    </div>
    
    <footer>
        <div id="footer-inner" class="container_8 clearfix">
            <div class="grid_8">
                <span class="fr"><a href="#">Documentation</a> | <a href="#">Feedback</a></span>Last account activity from 127.0.0.1 - <a href="#">Details</a> | &copy; 2011. All rights reserved. Theme design by VivantDesigns
            </div>
        </div>
    </footer>

</body>
</html>